import { defineComponent, onMounted, reactive } from 'vue'
import { ElTag } from 'element-plus'
import { useStore } from 'vuex'
import styles from './index.module.scss'

export default defineComponent({
  name: 'StatusAccounting',
  emits: ['DeviceNum'],
  setup(props: any, { emit }) {
    const store = useStore()
    const state = reactive<any>({
      info: null
    })
    //  统计数据
    const index = async () => {
      try {
        const { data } = await store.dispatch('manholes/ManholeMapGetDeviceStateNumGet')
        state.info = data
      } catch (error) {}
    }
    //  查看设备数据
    const onDeviceNum = (value: number) => {
      emit('DeviceNum', value)
    }
    onMounted(() => {
      index()
    })

    return () => (
      <div class={styles['home-box-accounting']}>
        <ElTag effect="dark" onClick={() => onDeviceNum(1)}>
          设备：{state.info?.deviceNum}
        </ElTag>
        <ElTag effect="dark" onClick={() => onDeviceNum(3)}>
          在线设备：{state.info?.deviceLineNum}
        </ElTag>
        <ElTag effect="dark" onClick={() => onDeviceNum(2)}>
          离线设备：{state.info?.deviceOffNum}
        </ElTag>
        <ElTag effect="dark" onClick={() => onDeviceNum(4)}>
          故障设备：{state.info?.deviceFaultNum}
        </ElTag>
      </div>
    )
  }
})
